<template>
  <view class="login-page bg-gray-100 min-h-screen p-4">
    <!-- 标题 -->
    <view class="text-center py-8">
      <view class="text-2xl font-bold text-green-600">用户登录</view>
      <view class="text-sm text-gray-500 mt-2">欢迎回到跃动西大</view>
    </view>

    <!-- 登录表单 -->
    <view class="bg-white rounded-lg shadow-md p-4">
      <!-- 手机号 -->
      <view class="mb-4">
        <view class="text-gray-700 mb-2">手机号</view>
        <input 
          type="number" 
          v-model="formData.mobile" 
          placeholder="请输入手机号" 
          class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:border-green-500 outline-none"
        />
        <view v-if="errors.mobile" class="text-red-500 text-xs mt-1">{{ errors.mobile }}</view>
      </view>

      <!-- 密码 -->
      <view class="mb-4">
        <view class="text-gray-700 mb-2">密码</view>
        <input 
          type="password" 
          v-model="formData.password" 
          placeholder="请输入密码" 
          class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:border-green-500 outline-none"
        />
        <view v-if="errors.password" class="text-red-500 text-xs mt-1">{{ errors.password }}</view>
      </view>

      <!-- 登录按钮 -->
      <button 
        @click="handleLogin" 
        class="w-full bg-green-600 text-white py-3 rounded-lg font-medium mt-4 hover:bg-green-700"
      >
        登录
      </button>

      <!-- 注册链接 -->
      <view class="text-center mt-4">
        <text class="text-gray-500">还没有账号？</text>
        <text @click="goToRegister" class="text-green-600 ml-1">立即注册</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { login } from '@/api/auth'
import { setAuthInfo } from '@/utils/auth'

const userStore = useUserStore()

// 表单数据
const formData = reactive({
  mobile: '',
  password: ''
})

// 错误信息
const errors = reactive({
  mobile: '',
  password: ''
})

// 表单验证
function validateForm() {
  let isValid = true
  
  // 重置错误信息
  errors.mobile = ''
  errors.password = ''
  
  // 验证手机号
  if (!formData.mobile) {
    errors.mobile = '请输入手机号'
    isValid = false
  } else if (!/^1[3-9]\d{9}$/.test(formData.mobile)) {
    errors.mobile = '请输入正确的手机号'
    isValid = false
  }
  
  // 验证密码
  if (!formData.password) {
    errors.password = '请输入密码'
    isValid = false
  } else if (formData.password.length < 6) {
    errors.password = '密码长度不能少于6位'
    isValid = false
  }
  
  return isValid
}

// 登录处理
async function handleLogin() {
  // 表单验证
  if (!validateForm()) {
    return
  }
  
  try {
    // 显示加载提示
    uni.showLoading({
      title: '登录中...'
    })
    
    // 调用登录接口
    const res = await login({
      mobile: formData.mobile,
      password: formData.password
    })
    
    // 关闭加载提示
    uni.hideLoading()
    
    // 登录成功，先保存认证信息
    const authData = res.data;
    
    // 将认证信息保存到本地存储
    setAuthInfo(authData);
    
    // 更新用户登录状态
    userStore.login();
    
    // 先保存用户ID
    userStore.updateUserInfo({
      id: authData.userId.toString() // 将后端返回的userId转换为字符串存储
    })
    
    // 获取完整的用户信息
    await userStore.fetchUserInfo()
    
    // 显示成功提示
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    })
    
    // 跳转到首页
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }, 1500)
  } catch (error) {
    // 关闭加载提示
    uni.hideLoading()
    
    // 显示错误提示
    uni.showToast({
      title: '网络异常，请重试',
      icon: 'none'
    })
    
    console.error('登录失败', error)
  }
}

// 跳转到注册页
function goToRegister() {
  uni.navigateTo({
    url: '/pages/profile/register'
  })
}
</script>

<style>
/* 可以添加自定义样式 */
</style>
